#include('header.html')
<style>
  table td {
    border-top: none !important;
  }
</style>
<div class="contact-us">
  <div class="mini-top">
    <div>
      <p>Contact Us</p>
    </div>
  </div>
  <div class="my-box">
    <div class="container">
      <div class="my-title text-center"><br>
        <h1>Get In Touch!</h1>
        <p class="text-muted">创客实验室致力于挖掘每一位学生兴趣并让其热爱<br>All Insistence Are Enthusiam.</p>
      </div>
      <div id="submitEmail"> <!-- 第二个孩子 -->
        <div>
          <div class="col-lg-5 col-sm-5 col-xs-12">
            <div>
              <h3>Call Us</h3>
              <p class="text-muted">联系电话： <strong>0564 ********</strong>,<br> Monday - Friday, 9am - 7pm</p>
            </div>
            <div>
              <h3>Drop a Line</h3>
              <p class="text-muted">service@yunshipei.com, <br/>期待您的来信public.</p>
            </div>
            <div>
              <h3>Visit Us</h3>
              <p class="text-muted">安徽省六安市裕安区月亮岛WanXi university 明德楼415室</p>
            </div>
          </div>
          <div class="col-lg-7 col-sm-7 col-xs-12">
            <div id="error" style="margin: 0 10px; display: none;" class="alert alert-warning">
              <strong>ERROR：</strong><span>{{errorMsg}}</span>
            </div>
            <div id="success" style="margin: 0 10px; display: none;" class="alert alert-success">
              <strong>SUCCESS：</strong><span>发送成功，感谢您的来信！</span>
            </div>
            <form @submit.prevent="sendEmail">
              <table class="table ">
                <tr>
                  <td>
                    <input class="input" maxlength="4" v-model="email.name" placeholder="姓名">
                  </td>
                  <td>
                    <select class="input" v-model="email.sex">
                      <option value="1">男</option>
                      <option value="2">女</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td>
                    <input class="input" v-model="email.tel" maxlength="11" placeholder="电话">
                  </td>
                  <td>
                    <input class="input" v-model="email.email" placeholder="Email">
                  </td>
                </tr>
                <tr>
                  <td colspan="2">
                    <textarea class="input" rows="4" v-model="email.content"
                              placeholder="写下你想说的public."></textarea>
                  </td>
                </tr>
                <tr>
                  <td colspan="2" class="text-right">
                    <input type="submit" style="width: 120px; background-color: #7C6AA6;"
                           class="btn btn-info"/>
                  </td>
                </tr>
              </table>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  var emailReg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
  var telReg = /^1[34578]\d{9}$/;

  var esm = new Vue({
    el: '#submitEmail',
    data: {
      tip: null,
      errorMsg: '发送失败',
      email: {name: '', sex: 1, tel: '', email: '', content: ''},
      error_span: null,
      success_span: null,
      delay: 500,
      isCan: true
    },
    methods: {
      sendEmail: function () {
        if (this.isCan && this.checkForm()) {
          $.post('/email/submit', this.email, function (data) {
            if (data.success) {
              esm.tip = true;
              esm.isCan = false;

              esm.email = {sex: 1};
            }
          });
        }
      },
      checkForm: function () {
        if (this.email.name.length < 1) {
          this.errorMsg = '不打算留下您的大名吗?';
        } else if (!telReg.test(this.email.tel)) {
          this.errorMsg = '手机号码格式不正确!';
        } else if (!emailReg.test(this.email.email)) {
          this.errorMsg = '邮箱格式不正确!';
        } else if (this.email.content.length < 1) {
          this.errorMsg = '你不说点什么吗?';
        } else {
          return true;
        }
        this.tip = false;
        return false;
      }
    },
    watch: {
      tip: function (nv, ov) {
        if (nv !== null) {
          if (nv === true) {
            this.success_span.fadeIn(this.delay);
          } else if (nv === false) {
            this.error_span.fadeIn(this.delay);
          }
          window.setTimeout(function () {
            esm.success_span.fadeOut();
            esm.error_span.fadeOut();
            esm.tip = null;
          }, this.delay + 1800);
        }
      }
    },
    mounted: function () {
      this.error_span = $('#error');
      this.success_span = $('#success');
    }
  });

</script>
#include('footer.html')
